#browser sketch sheet

[hordraomin]

Krita tutorial the way I know it.

Basics: What is where.

Gimmicks.

Specific advice on specific tools.

Basics: What is where.

Upon opening the program this is what you're met with. First of all, must comment: The layout is HEAVILY editable so you can just drag menus anywhere you want, even leave them floating amidst the sheet you're drawing on.

You can create custom art templates, I have two o'mine here as both have my signature background color.

As well, you can edit the custom document settings, as in what size you want it, what resolution, even the initial content of the image. As well you can create from clipboard: Just copy some image from your browser and Krita will recognize it (useful for making meme edits lol).

Now, once you have your file, I will show you what is where.

Brushes:

Brushes are easy to edit and there are tons of free bundles to download online. I myself only got one bundle, Jackpack (bit hard to find now due to original source being lost, it is still available but bit tricky to come by).

There. Are. Tons.

Some of these are my custom brushes for calligraphy in neography, you might even guess which ones. You can edit existing brushes, make new ones from the ones you've edited without changing the original, and all sorts of stuff (more below in the third chapter).

There are numerous packages of brushes once you enter Krita, but only one/two are available when you first open it. To unlock them all, click here:

And make sure all bundles are dark gray in color (example of both dark and light below).

Now Tools Options: those will pop up depending on what tool you're using.

Symmetry: Fun stuff. You can drag the lines depending on how you need them and then center them back to the center of the screen if needed.

Gradients and Textures also have their tools options, you can play with those to get the feeling what they can do (more in third chapter).

The Filters tab is useful too. Blurring, motion blurring, color mapping, artistic filters and all that: Quite fun.

Gimmicks.

Krita allows you to customize your workspace freely. Floating menus, tabs, anything you want. It has quite many drivers at that-

To access the workspace templates, go to Window and choose Workspace.

Krita allows for copy-pasting any image onto the sheet. Though, for me it sometimes crashes if I accidentally copy-paste text into it without choosing the Text tool first.

The software allows for both raster and vector work. It is basically Photoshop sharpened to be used by artists primarily.

There are some interesting mechanics regarding the Eraser (default bind E).

You can use it with any brush, allowing for textured erasure/quick work. Good for sketching.

You can use it on gradients (given there's a transparent point on the gradient preset).

There's a Multibrush tool:

People say Krita is good for animation but my brain can't wrap around it yet honestly @~@.

The keybinds:

B - Brush tool.

E - Erase tool option.

M - Mirror (useful for checking accuracy from a new angle).

Ctrl - Color pick (when used with brush or other color-using tools).

Shift+L.Mouse+drag - Changes the size of the brush by dragging left and right.

Ctrl+E - Merge layer with the one below.

Ctrl+G - Group selected layers.

Ctrl+A - Select whole sheet.

Ctrl+Shift+A - Deselect everything.

F - Bucket tool.

G - Gradient tool.

Ctrl+S - Save document.

Ctrl+Shift+S - Save As document.

Ctrl+N - New document.

Ctrl+O - Open document (will be seen in a new tab on top of the sheet).

Ctrl+C - Copy selected layer or selection.

Ctrl+X - Cut selected layer or selection.

Ctrl+V - Paste copied/cut layer or selection.

Q - Multibrush tool.

R.Mouse - Interesting thing: Opens up a quick selector for brushes and colors you've already used in the piece.

1 - Zoom 100%.

2 - Zoom to fit the piece vertically.

3 - Zoom to fit the piece horizontally.

4, 5, 6 - Turn 15 degrees (4 and 6) or undo the turning whatsoever (5).

Ctrl+I - Negative filter applied to layer.

Ctrl+U - Color editing on the layer.

Ctrl+Y - Soft proofing mode (for color mistakes and stuff like that, mostly annoying for me tbh).

Ctrl+T - Transform selection/layer.

Ctrl+R - Square select tool.

Ctrl+J - Lasso select tool.

Honestly you can just hover your mouse over tools and see their shortcut binds, as well. Or edit them in Settings.

Specific advice on specific tools.

Brush:

Brush editor is a great tool for making custom brushes, and it even has a sratchpad to test them out. Lots of settings, but no need to be afraid; Most of them you might never use on purpose.

Use Brush Smoothing for great and pretty lines in lining pieces or making calligraphy.

Gradient:

The four icons to the right top are:

Mirror gradient.

Arrange by lightness value.

Arrange by color value.

Space the stops evenly.

Click the gradient to add a new stop. The three things to the left are:

Make the stop use Primary Color.

Make the stop use Secondary Color.

Make the stop use a fixed color.

[angeliqueiguess]

Hidden Notes (mk.l)

002. Who Are You?

After several days, Y/n still couldn’t get those yellowed papers out of her mind. They seemed to call to her, their worn corners and faded ink whispering secrets she had no right to uncover. Yet, there they sat on the coffee table in front of her couch, daring her to make sense of them.

With a steaming cup of tea cradled in her hands, Y/n finally gave in to her curiosity. She settled into the couch, exhaling a deep breath that filled the small apartment with an air of anticipation. Carefully, almost reverently, she began unfolding the notes as if they were delicate artifacts from a forgotten past.

The handwriting was erratic, almost frantic, as if each stroke of the pen carried the weight of untamed emotion. Some lines were jagged and haphazard, spilling out beyond the margins, while others were neat and deliberate, as though the writer had tried to regain control of their thoughts.

She smoothed out the first sheet on her lap and began to read:

"The nights are long, but the dreams are longer. I keep running, but the shadows always catch me."

Y/n furrowed her brow. The words were hauntingly poetic yet deeply unsettling, like a glimpse into someone’s most vulnerable thoughts. She felt as though she were intruding on something private—yet she couldn’t stop.

The following pages were less refined, filled with fragmented phrases and scattered thoughts. But as Y/n continued reading, she started noticing a pattern. Each piece seemed to be part of a larger whole, like puzzle pieces waiting to form a complete picture—or verses of a song yet to be finished.

One page, its ink darker and fresher than the rest, bore the ominous words:

"The sky turned red."

Another referenced a stranger:

"She holds the key."

Running her fingers along the frayed edges of a torn sheet, Y/n spotted something written in tiny, precise letters at the bottom corner: Mark L.

“Mark L.,” she murmured aloud, letting the name roll off her tongue as if speaking it might summon some kind of answer. Who was Mark L.?

Intrigued, she sifted through the remaining pages with new purpose, scanning for any other clues. On a particularly worn sheet, she found what looked like the beginning of a chorus:

"Run fast, breathe deep, The past can’t catch me. But every road I take Leads me back to the pain."

Y/n closed her eyes for a moment, letting the words settle in her mind. She could almost hear a melody accompanying them, faint and elusive, as if it were hiding just out of reach. The lines felt strangely familiar, like an echo of emotions she couldn’t quite place but had felt before.

Among the pages were small sketches—stars, arrows, and what appeared to be a rough drawing of a guitar in the corner of one sheet. Simple, unpolished, yet full of personality.

The most striking piece, however, was scrawled on the back of an old envelope:

"In the cracks, I find myself, A broken heart on a dusty shelf. If someone finds these words someday, Will they understand or throw them away?"

Y/n leaned back against the couch, holding the envelope lightly between her fingers. These words weren’t just idle musings—they were a plea, a question hurled into the void, hoping for an answer. “Who are you, Mark?” she whispered, her gaze fixed on the ceiling as if the apartment’s walls might offer her some insight.

But there was nothing—only the hum of the refrigerator in the next room, filling the silence.

Determined to learn more, Y/n grabbed her phone and opened her browser. She typed “Mark L.” along with “writer,” hoping that something, anything, would come up. As the search results loaded, she repeated the name softly to herself, as if saying it aloud might bring her closer to the truth.

At first, the search yielded nothing useful. There were too many Mark L.’s—none of whom seemed connected to the notes. But she wasn’t discouraged. Something inside her, a mix of curiosity and an inexplicable sense of duty, urged her to keep digging.

For now, she set the notes back on the table. Yet, even as she moved on to mundane tasks—washing dishes, adjusting the curtains, organizing the kitchen—her thoughts kept drifting back to the mysterious Mark L. Whoever he was, he had hidden these words deliberately, as if hoping they’d someday be found.

The apartment no longer felt like just a blank slate for her new beginning. It was alive with the weight of a mystery. The walls seemed to hum with secrets, and Y/n couldn’t shake the feeling that something important was waiting to be discovered.

As she stared at the scattered pages on the coffee table, she made herself a promise: she would find out the truth. Not just for him, but for herself. This wasn’t just a distraction—it felt like a connection to something larger, a bridge between her story and his.

The apartment wasn’t just hers anymore. It carried a piece of Mark L.’s history too, and Y/n was determined to uncover it, piece by piece.

previous // next masterlist

taglist open: @thegracerammy @kittydollzz

credits: @strangergraphics (dividers)

[pumpkin-spike18]

✨Weekly Progress #27-28✨

I released/helped make 3 games in about 2 weeks.

The passage of time is weird.

Weekly Progress #27

Posted devlog

Marketing on Reddit

Updated pitches

Initial BWBOK comments review

Planned July work

Wrote 1.2k+ words for O2A2

Sketched O2A2 sprite design

Edited O2A2 script down to 990 words

Sketched O2A2 BG thumbnail

Digital sketch for O2A2 BG

Sketched O2A2 sprite

Flat colored O2A2 sprite

Finished O2A2 sprite

Rendered O2A2 BG

Weekly Progress #28

Programmed O2A2

Linearted BG for 2nd O2A2

Finished O2A2 GUI changes

Finished + Uploaded O2A2 game page & uploaded

Finished BG for 2nd O2A2

Marketing O2A2

Finished aKwtD sketches

Most of the past two weeks was focused on O2A2 work, for which I released the fourth entry into the kill series!

You can play Last Kill in browser on itch.io!

There's also a thank you doodle in the post-mortem for the game! c:

I also helped make the backgrounds for a second O2A2 game by LeyKlussyn!

You can also play Out of Nowhere in browser on itch.io!

It is a short game on parenthood, gender-queerness, love and acceptance.

Be sure to give his game lots of love! :D

O2A2

Here's where I elaborate on what I've done each week divided per game. But most of it was O2A2 and that was discussed above lol

I made Last Kill in 4 days, which was pretty surprising since I haven't done point and click like this before. There were a few new coding tricks I used.

A Kiss with the Devil

A Kiss with the Devil (aKwtD) is a new project I'm working on with Ley! It is a yuri game where you get to romance an eldritch being. With tentacles, ofc!

The initial designs have been finished and I'm currently working on some full reference sheets for both characters! It has been a blast so far!

Other than working on games, I've been working hard the past few weeks to improve my art. Hopefully I'll be able to show some improvements soon!

[candyredappledragon]

//ooc post

I LOVE TUMBLR MOBILE NOT LETTING ME EDIT DRAFTS. PEAK APP. :)))))) I have to use my other tablet for the browser version since I'm at work. 😞😞😞

Anyway, on that note! Thank you all for being patient with me and my replies on asks. I promise I'm trying to get to them but I try to make it work and line up. 😔

So if you are wondering what happened to it. Don't worry I got it. I just gotta draw up sketches then finish the doodles. I also plan on showing Kieran's team and a little ol event regarding the epilogue coming out real soon ( it would be a few days after ). 👀 It is going to be an experiment! (:

Kieran's team is going to be very interesting too. I will try to work on a sheet or something. Also!!! If you guys are okay I can reblog meme asks but!!! They would mostly be text replies unless I feel like drawing for it!

It is up to you! Yes you, the viewer!

If you have any more questions regarding the blog or anything else related to it please do let me know! 🎉

[hasarjunadoneanythingwrong]

do you mind if i ask what tablet do you use? and if you practice drawing digitally more than traditionally? i’m trying to get into the habit of drawing after seeing your art!! you always feel like you’re having fun 💪💪💪

I’ve been meaning to answer a similar question i got ages back so I’m just gonna answer this rn!!!

I use a Wacom Cintiq 16-that’s one of the tablets with a light up screen you can see the movement directly on as you draw, vs a tablet that’s blank where you have to sync up your movement with the computer screen that I used to use (there’s nothing wrong w that and those tend to be a lot cheaper, but I personally find it really hard 😭) there’s a lot of options out there though-you can even get special pens that let you draw using your phone (or draw with your finger on your phone, though mine is a bit too small to really do that well w how clumsy I am tbh…or maybe that’s just quitter talk!)

As for the art program, what I personally use is krita. Before that for this blog I used photopea, which is a free brower based program that’s an almost 1:1 copy of photoshop, but it had a major issue where if the internet went out you couldn’t use it and if your browser crashed there was no way to recover your work. Krita is also completely free, and while I’m by no means an expert at all I’d say it works well for how I use it! (Though I really should be learning more about some of its other functions)

I’d like to get clip studio if only for the brush capabilities but my laptop is slowly dying and I don’t really want to buy new software until I have something new

I also do do traditional! At this point in time it’s nothing more serious than ballpoint sketches with most of my serious work being digital, but at point I took irl traditional art classes so I do have some background in it. It’s good to practice a variety of art styles anyway, but I like to sketch through the day to occupy myself. I have whole sheets of doodles that none of you have ever seen bc they’re traditional and not really worth taking poor ipod photos just to spam here (seriously, I have stacks of the stuff)

[taina-salinas]

Password: 2Dart

Assignment: In-Game Scene

Tools: Ipad, Procreate, Unity

Description: In-Game scene featuring Adelia in a point-and-click style of game.

Feedback: I'm not necessarily sure how I feel about the genre/POV I used for this piece. I wanted to continue with a more painted style, and I thought it would be cool if the foreground element was like a doorway you could look into, but as I was starting to sketch it out, I realized it gave more of a point-and-click vibe than I was originally intending. My game is a mystery game, though I haven't thought of the actual mechanics, so it's not like this doesn't fit. I just think after making this piece I realized it's not the style/vibe I want to go for when imagining a more solidified version of the game. As much as I enjoyed doing more painting-esque art, I think my game would have to use a simpler, line-art style (similar to the character sheet/turnaround) as you would likely be walking around the scenes rather than clicking through them. That all being said, I do like how the actual art turned out!

[chocolatedetectivehottub]

Web Development,

Web Development,

Web development is the process of creating and maintaining websites and web applications that are accessible via the internet. It encompasses everything from designing and structuring the user interface to developing backend systems that make the website or application functional. With the rise of the digital era, web development has become a crucial skill for businesses, individuals, and organizations looking to establish an online presence. This article will provide a comprehensive overview of web development, including its key components, technologies, and trends.

Key Components of Web Development

Web development can be broadly categorized into three main components: front-end development, back-end development, and full-stack development.

1. Front-End Development

Front-end development refers to the part of web development that focuses on the user interface (UI) and user experience (UX). This is everything that a user interacts with directly in a web browser, such as buttons, text, images, and navigation menus.

Technologies used in front-end development:

HTML (HyperText Markup Language): The foundational language used to structure content on the web.

CSS (Cascading Style Sheets): A style sheet language used to control the layout and appearance of web pages.

JavaScript: A programming language that enables interactivity on web pages, such as animations, forms, and dynamic content.

Frameworks & Libraries: Tools like React, Angular, and Vue.js are used to streamline the development of interactive and responsive web applications.

2. Back-End Development

Back-end development focuses on the server side of web development. It involves working with databases, servers, and application logic that enable a website to function properly. The back-end is not visible to users but is essential for data processing, security, and overall website functionality.

Technologies used in back-end development:

Programming Languages: Common languages include Python, Ruby, PHP, Java, and Node.js.

Databases: Structured data is stored in databases like MySQL, PostgreSQL, or NoSQL databases like MongoDB.

Web Servers: Servers like Apache and Nginx handle requests from users and serve the appropriate web content.

Frameworks: Backend frameworks like Django (Python), Laravel (PHP), and Express (Node.js) simplify and expedite development by providing built-in tools for common tasks.

3. Full-Stack Development

Full-stack development refers to the development of both the front-end and back-end components of a web application. Full-stack developers are skilled in both areas and can handle all aspects of web development, making them highly valuable in creating comprehensive web solutions.

Skills required for full-stack development:

Proficiency in front-end technologies (HTML, CSS, JavaScript, frameworks)

Knowledge of back-end technologies and frameworks

Familiarity with database management

Understanding of version control systems like Git

Knowledge of web security and performance optimization techniques

The Web Development Process

The process of developing a website or web application typically follows several key stages:

Planning and Research: This is the first step in any web development project. It involves understanding the purpose of the website, identifying the target audience, and outlining the features and functionality required. Market research and competitor analysis can also inform the planning process.

Design: During the design phase, the website’s layout, user interface, and overall aesthetics are created. Designers typically use tools like Adobe XD, Sketch, and Figma to build wireframes and prototypes that represent the website’s structure and visual design.

Development: The development phase involves writing the code for both the front-end and back-end components. Developers use programming languages, frameworks, and libraries to bring the design to life and ensure that the website functions properly.

Testing: Before launching the website, extensive testing is conducted to identify and fix any bugs or issues. This includes testing the website’s compatibility across different browsers, devices, and operating systems.

Deployment: Once the website passes testing, it is deployed to a web server and made available to the public. This may involve purchasing a domain name, setting up web hosting, and ensuring that all the necessary components are properly configured.

Maintenance: Web development does not end with deployment. Ongoing maintenance is necessary to update content, add new features, and fix any issues that may arise. Regular maintenance ensures that the website remains functional and up-to-date.

Trends in Web Development

Web development is a constantly evolving field, with new technologies and trends emerging regularly. Here are some of the latest trends in web development:

Progressive Web Apps (PWAs): PWAs are websites that behave like native mobile apps, offering offline capabilities, push notifications, and improved performance.

Responsive Design: With the increasing use of mobile devices, responsive design has become essential to ensure that websites look and work well on all screen sizes.

Single-Page Applications (SPAs): SPAs allow for faster, smoother user experiences by loading content dynamically without requiring full-page reloads.

WebAssembly (Wasm): WebAssembly allows developers to run code written in languages like C, C++, and Rust directly in the browser, enabling faster performance for web applications.

AI and Machine Learning: Artificial intelligence and machine learning are being integrated into web applications to provide personalized experiences, chatbots, and intelligent recommendations.

Serverless Architecture: Serverless computing allows developers to build and run applications without managing server infrastructure, improving scalability and reducing costs.

Conclusion

Web development is an exciting and ever-changing field that requires a diverse skill set. Whether you’re designing the user interface, developing the back-end infrastructure, or working as a full-stack developer, the work you do has the potential to impact millions of users worldwide. By staying up-to-date with the latest trends and technologies, web developers can continue to create innovative and engaging web experiences.

4o mini

O

[solachal]

Tags 🐟

FAQ About Ask box Sketch Box All Tags (browser)

All my art

Digital

3D art ☆ Wips/ doodles | sketch

Pixel art ☆ Aroace art | Enby

Comics

Traditional

Crafts

Chalk art

Woodburning

Sketchbook art

My oc's

concept art My sonas ->

Word building

Character sheet

Text post | loredump | backstory

☆ shitposts | memes | edits

All my comics/ stories/ projects

More than a feeling

Quiet glow

Game development stuff

All my animations

Space man

Sonic the hedgehog

All fanart

Ghostbusters

Creepypasta ⦻ | Marble Hornets |

Aikatsu | Precure | Cardcaptor Sakura

Natsume Yuujinchou

All game fanart

Ace Attorney

Legend of Zelda | Majoras mask | Skyward sword | Breath of the wild

Kingdom hearts

Super Mario | Super Paper Mario | SM64 | Luigis mansion

Partners in time | The thousand year door | Bowsers inside story

Sonic the hedgehog | Sonic X

Frontiers | Unleashed | Secret Rings | Black Knight

Pokemon | The anime/ movies | Diamond and pearl

PMD: Explorers of sky

[saulrantsnonsense]

one of my drawings almost became lost media (kind of)

yall so im currently working on a drawing and needed to check the reference sheet i made for myself, i start looking for the file and i simply cannot spot it, at first i think well im probably just missing it after all i do have many drawings

but after like 2 minutes i think to myself huh well maybe i accidentaly "deleted it" and by that i mean send it to the bin where it can be restored, but i still cannot find it over there, and again i think the same thing again that im just missing it

so in order to make the search faster i decided to localize it by searching the name of the file, problem is i dont remember it, so i go into a discord group, why you may ask? bc i remember sharing said drawing over there and when i click the picture and click on open in browser, on the search thingy address whatever, the name of the file appears at the end

so i go back to the bin and search it by name, and again nothing, but with foolish hope i think, well maybe it wasnt here in the first place so lets try this metod again but on the folder where i have the files of my drawings, and to my surprise a file did appear, just not the one i was looking for

the file in question was an uncomplete abandoned sketch that i thought i had deleted... SO what apparently happened was that i did delete the one i was looking for and at some point when i was clearing a bit of the bin i deleted that forever aparently

and you may wonder but why did those completly diferent files had the same name? bc the way i save them is by number, so when i was drawing the reference sheet at that time the number of drawings that i had made (since i decided to start numbering my files) was 19

then what i think happened (bc i dont rlly remember) was that i decided to create another drawing which is now just an abandoned sketch, but accidentally named it 19, and since i just wanted to save it quickly i just pressed the "yes replace the file" thingy and just didnt notice

thankfully i did share the drawing on that discord server and posted it on my main tumblr blog so it wasnt gonna be totally lost media but it almost couldve

[technorizesoftwaresolutions]

Learning web design can be an exciting journey! Here's a step-by-step guide to get you started:

Understand the Basics:

Learn HTML (Hypertext Markup Language) for structuring web pages.

Master CSS (Cascading Style Sheets) for styling HTML elements.

Get familiar with JavaScript for adding interactivity and dynamic behavior.

Take Online Courses:

Websites like Codecademy, Udemy, and Coursera offer comprehensive courses on web design.

Look for courses covering HTML, CSS, JavaScript, and web design principles.

Practice Regularly:

Build simple web pages to apply what you've learned.

Experiment with different layouts, styles, and interactive elements.

Learn Responsive Design:

Understand how to make your websites adapt to various screen sizes (desktop, tablet, mobile).

Study frameworks like Bootstrap or Foundation for responsive design.

Explore Design Principles:

Learn about color theory, typography, and layout design.

Understand user experience (UX) and user interface (UI) design principles.

Study Web Design Tools:

Familiarize yourself with design tools like Adobe XD, Sketch, or Figma for creating mockups and prototypes.

Learn how to use developer tools in browsers for debugging and testing.

Stay Updated:

Follow web design blogs, forums, and communities to stay updated on industry trends and best practices.

Attend web design conferences or workshops to learn from experts and network with other designers.

Build Projects:

Start building your portfolio by working on personal projects or freelance gigs.

Showcase your skills by creating websites for friends, family, or local businesses.

Get Feedback:

Share your work with others and ask for feedback to improve.

Join online forums or communities where you can get constructive criticism from experienced designers.

Continuously Improve:

Web design is an ever-evolving field, so keep learning and experimenting with new techniques and technologies.

Challenge yourself with more complex projects to expand your skills.

Remember, learning web design takes time and practice, so be patient with yourself and enjoy the process!

[snigepippi]

Notes by hands continued

Make sure to sketch and illustrate. Pictures and graphs work. Use different colours.

Ok. Over to digital notes.

Use a desktop! Not that shit about having everything in the cloud or in browsers. Sort it on your computer and take backups on an extern harddisk.

I use several folders. And they are sorted per relevance. Folders on the desktop is current projects. Folders in the pathfinder is archive, references or less important.

For note-taking and exam preparation I very much recommend a database like OneNote or something similar. It is good if it fits your brain. I have taught many students to use it and it really helps them. However I don't use it. I never grew up with it and cannot be bothered to change my own system. I mainly sort everything in calc tools.

I have several workbooks and sheets opened at once. And generally work on different sheets where one is raw data and the others are the more refined results.

I hope this helped.

My system works very well for me. But I suggest you make your own system rather than copying mine.

Is there an un-aesthetic version of studyblr? I don't want to look at your notes and feel inferior, or see you set up your study table in a way that suggests you never experienced a lick of stress. I want real study tips, that teach me how to study. With the ugly notes where they explain a good way to process the information and write it down that isn't just copying the whole book. I want organisation tips, and how to prepare for tests and reread materials in a way that doesn't take a week per chapter.

[degreewalacom]

What are the tools used to design and develop website?

Designing and developing a website involves a variety of tools and technologies. The choice of tools can depend on your specific requirements and preferences. Here's a list of common tools and technologies used in website design and development:

1.Text Editors and Integrated Development Environments (IDEs):

·Sublime Text

·Visual Studio Code

·Atom

·Adobe Dreamweaver (IDE with WYSIWYG editor)

2.Version Control Systems:

·Git

·GitHub, GitLab, Bitbucket (for hosting and collaboration)

3.Web Browsers:

·Google Chrome

·Mozilla Firefox

·Microsoft Edge

·Safari

4.HTML/CSS Frameworks:

·Bootstrap

·Foundation

·Bulma

·Materialize

5.JavaScript Libraries and Frameworks:

·jQuery

·React

·Angular

·Vue.js

6.Graphic Design and Image Editing:

·Adobe Photoshop

·Adobe Illustrator

·Sketch

·GIMP (open-source alternative)

7.Wireframing and Prototyping Tools:

·Adobe XD

·Sketch

·Figma

·nVision

8.Content Management Systems (CMS):

·WordPress

·Joomla

·Drupal

·Magento (for e-commerce)

9.Web Development Languages:

·HTML (Hypertext Markup Language)

·CSS (Cascading Style Sheets)

·JavaScript

·PHP, Python, Ruby (for server-side scripting)

10.Databases:

·MySQL

·PostgreSQL

·MongoDB (NoSQL)

·SQLite

11.Server Technologies:

·Apache

·Nginx

·Node.js

·Express.js (Node.js framework)

12.Hosting and Deployment:

·Amazon Web Services (AWS)

·Microsoft Azure

·Heroku

·cPanel (for shared hosting)

13.Responsive Design Testing:

·Browser developer tools

·Responsinator

·BrowserStack

14.Performance and Optimization Tools:

·Google PageSpeed Insights

·GTmetrix

·Pingdom

·WebPageTest

15.SEO Tools:

·Google Analytics

·Google Search Console

·Moz

·SEMrush

16.Accessibility Testing Tools:

·WAVE

·Axe

·Color Contrast Analyzer

17.Task Runners and Build Tools:

·Gulp

·Grunt

·Webpack

18.Code Editors for Frontend Development:

·VS Code

·Sublime Text

·Atom

19.Code Version Control and Collaboration Tools:

·Git and GitHub/GitLab/Bitbucket

·Trello, Jira, Asana (for project management)

20.Text and Image Editors for Content Creation:

·Microsoft Word, Google Docs (for text content)

·Adobe Photoshop, Canva (for image content)

These tools and technologies are just a starting point, and the specific tools you use will depend on your project's requirements, your team's preferences, and the technologies you are most comfortable with. Web development is a dynamic field, so staying up-to-date with the latest tools and trends is essential.

[iamvector]

How to create svg icons online for free?

Free SVG icons are a powerful and smart means of communicating your ideas across audiences. Knowing that it would simply up the effect of your creation, these magic shapes are just so hard to overlook.

Graphic designers are often found to experiment with an array of methods for using icons on their websites, applications, and other digital content. Lately, the use of non-standard fonts has also gained tremendous popularity amongst designers. However, there has been a hullabaloo on the Internet over what’s better, icon fonts, or free SVG icons?

What’s Better- Icon Fonts Or Free Svg Icons?

Although icon fonts are highly customizable with its standard CSS (Cascading Style Sheets) styling rules over image icons, their designing is quite limited to monochromatic colors, size, standard transforms, and animations, They can also turn out to be glitchy, leading to the generation of multiple server requests. Additionally, your browser’s expected failure to identify the icon font can show up a blank space instead of fonts themselves.

On the other hand, SVG is a bundle of XML code rather than an image or a font. This makes them reasonably sized, highly performant, and scalable. Plus, they can undergo modifications without losing quality as opposed to icon fonts.  You can also edit, color, or animate each individual bit of an SVG icon, unlike the conventional icon font. 

Scalable Vector Graphics (SVG) refers to a vector image format that can be encoded with the help of Extensible Markup Language (XML) syntax. It is a scalable image that is created with a series of coordinates. It is directly linked within a browser, adding further to its scalability. 

Guide on how to create SVG icons .

Let us understand how to create SVG icons. Here is much that you need to know for creating free SVG icons.

Drawing Icons

The first step to creating your own free SVG icon is to sketch them out. Draw each design on a distinct artboard and save each of them in a separate file. Now, open the vector design program of your choice. A vector image program entails drawing icons with the help of different colors, shapes, and path administration on a virtual drawing board. Following this, you export the .svg file, and the coding will take place behind the scene.

Affinity Designer, Inkscape, Sketch, DesignEvo., Vecteezy, CorelDRAW, and Vectr are some of the popularly used vector image programs. Alternatively, you can consider trying the readily available free SVG icons download on free vector icon websites out there.

Understand The Artboards

The artboard size won’t be a matter of concern if it’s a single icon. You will just need to ensure that it has a decent size, meaning neither too large nor too small. However, if you are seeking to create a uniform icon set, your artboards should be of the same size.  

Draw Over A Grid

Consider drawing the icons over a grid so they turn out as symmetrical as possible. Also, use a square Artboard and customizable stroke size for maximum efficiency. If you are creating a mono-colored icon, it would be best to set your design tool to solid black. Do not worry, as it can be easily changed in the application or the stylesheet to your desired color.

Keep Shapes Simple

While creating free SVG icons, make sure that the vector shapes are simple. It will bring out a simpler SVG code that loads in the blink of an eye and is least susceptible to show-up errors. Cut out the unnecessary points. For instance, a circle must need not more than four-vector points. Anything more than that can easily invite technical fuss. 

It is also essential to know that SVG images are based on universal shapes which can be created virtually by employing numbers and coordinates. The seven main shapes include line, path, circle, ellipse, polygon, and polyline. In terms, each shape is denoted as <circle>, <line>, and so on.

Layer Them Right

Consolidate shapes and layer them over one another to generate versatile imagery. Transform any grouped layers, circles, or ellipses to aggravate paths. This will assist you in creating free SVG icons with small file sizes and make sure that their quality remains intact across different channels.

You can reshuffle the artboards, retitle them, and export them as SVG files. Now, start creating a new Illustrator document with a resolution of 64x64px.

Read rest of the article here

[chocolatedetectivehottub]

web development,

web development,

Web development refers to the process of creating and maintaining websites and web applications. It encompasses everything from simple static pages to complex dynamic platforms, making it a crucial part of the digital world. This guide will delve into the different aspects of web development, highlighting key areas, tools, and technologies involved.

1. What is Web Development?

Web development is the practice of building websites that are accessible on the internet. It includes designing, coding, and deploying websites and web applications. Web development is typically divided into two main categories: front-end development and back-end development.

Front-End Development: Also known as client-side development, this involves the visual aspects of a website or web application that users interact with directly. Front-end developers focus on the structure, layout, and design, ensuring the user interface (UI) is both functional and appealing. Popular front-end technologies include:

HTML (HyperText Markup Language)

CSS (Cascading Style Sheets)

JavaScript

Front-End Frameworks (React, Angular, Vue.js)

Back-End Development: This refers to the server-side components that handle the data, logic, and databases powering a website or application. Back-end developers work with servers, databases, and APIs (Application Programming Interfaces) to ensure the proper functioning of the site. Technologies in this domain include:

Server-Side Languages (Python, Ruby, PHP, Java, Node.js)

Databases (MySQL, PostgreSQL, MongoDB)

Frameworks (Django, Ruby on Rails, Express.js)

2. Full-Stack Development

A full-stack developer is someone who has the skills to work on both the front-end and back-end of a web application. Full-stack developers are proficient in both client-side and server-side technologies, allowing them to manage entire web development projects. The role of a full-stack developer is highly sought after because of their versatility in handling different aspects of web development.

3. Web Development Process

The web development process typically involves several phases:

Planning: This phase involves defining the website’s purpose, identifying the target audience, and setting clear goals for the project. This is when the scope of work is outlined and project timelines are established.

Design: The design phase focuses on creating wireframes and prototypes that outline the website’s layout and user experience. Tools like Adobe XD, Figma, and Sketch are often used in this phase.

Development: The actual coding takes place during this phase. Front-end developers build the user interface, while back-end developers handle server-side scripting, databases, and logic.

Testing: After development, extensive testing is done to identify and fix bugs. This includes functional testing, cross-browser testing, performance testing, and security testing.

Launch: Once the website has been tested and approved, it is launched on a web server, making it accessible to the public.

Maintenance: Post-launch, websites require continuous monitoring and updates. This involves fixing bugs, updating content, and ensuring the website remains secure.

4. Popular Web Development Tools

Several tools and platforms assist in streamlining the web development process. Some popular ones include:

Text Editors and IDEs (Integrated Development Environments):

Visual Studio Code

Sublime Text

Atom

WebStorm

Version Control Systems:

Git (along with GitHub, GitLab, Bitbucket)

Design and Prototyping Tools:

Adobe XD

Figma

Sketch

Web Hosting and Deployment Services:

Netlify

Heroku

AWS (Amazon Web Services)

DigitalOcean

5. Responsive Web Design

With the increasing use of mobile devices, responsive web design has become a must. This approach ensures that websites provide an optimal viewing experience across a wide range of devices, from desktops to smartphones. Responsive design uses techniques like flexible grid layouts, media queries, and fluid images to adjust the website’s layout based on the screen size.

6. The Role of Web Developers

Web developers can specialize in various areas, and their role is continuously evolving as new technologies emerge. Some key areas of specialization include:

Front-End Developers: Focus on the visual components and user interface of websites. They need proficiency in HTML, CSS, JavaScript, and front-end libraries and frameworks.

Back-End Developers: Focus on building the infrastructure that powers the front-end. They are proficient in server-side languages, databases, and APIs.

Full-Stack Developers: Proficient in both front-end and back-end technologies, full-stack developers can work on all aspects of a website’s development.

DevOps Engineers: Focus on the deployment, monitoring, and maintenance of the infrastructure that supports web applications.

7. Web Development Trends

Web development is a fast-evolving field, and staying up-to-date with current trends is essential. Some key trends include:

Progressive Web Apps (PWAs): These are web applications that offer a native app-like experience while being accessible through the web. PWAs are fast, reliable, and work offline.

Jamstack Architecture: A modern approach to building websites that leverages pre-built static files and dynamic content through APIs, improving performance and security.

AI and Chatbots: The integration of artificial intelligence and chatbots into websites is helping businesses provide real-time assistance to users and enhance user experience.

Motion UI: The use of animations and transitions in websites to create interactive and engaging experiences.

8. Conclusion

Web development is an essential skill in today’s digital world. It encompasses a wide range of technologies, from front-end design to back-end functionality. Whether you're a beginner or an experienced developer, understanding the core principles of web development and staying updated on trends and technologies is key to creating successful, user-friendly websites and applications.

4o mini

[compilator]

Compilator: Week in Review #1

Web development

New way to create modals using HTML only

Which open-source monospaced font is best for coding?

Drawing a star with DOMMatrix

The State of HTML 2023 survey is now open!

What are JWTs/Jots/JSON Web Tokens?

From WebGL to WebGPU

Ultimate solution for generating placeholder images

Productivity

What Causes Bad CLS and How to Fix it?

Get All That Network Activity Under Control with Priority Hints

Css

The Path To Awesome CSS Easing With The linear() Function

A (more) Modern CSS Reset

CSS Findings From The Threads App: Part 2

Responsive type scales with composable CSS utilities

JavaScript

Speeding up the JavaScript ecosystem - Polyfills gone rogue

How to Code Dark Mode for Google Sheets with Apps Script and JavaScript

Understanding the JavaScript Modulo Operator

The Origins of TypeScript: A Documentary

React

Optimizing Provider Context Usage in React

Build Your Own ChatGPT Clone with React and the OpenAI API

How to Build an Accordion Component with React.js

v0: “AI tool from Vercel that works like Midjourney for React, that is, it issues code snippets based on your requests (prompts)

Bootstrap a React app with smol developer

Understanding Props in React — A Comprehensive Guide

Vue

Clean Layout Architecture for Vue Applications

Optimizing Vue.js apps with web workers

7 Quick Tips about Vue Styles You (Might) Didn’t Know

Svelte

Introducing runes

Exploring Astro and Svelte vs. SvelteKit: A comparative guide

How to Build an Etch-A-Sketch App with Svelte

Libs & Plugins

Benchmarks for JS minifiers: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler, tdewolff/minify

MouseMove - JavaScript mouse cursor behavior automation for web presentation

Browser

Nue JS is an extremely small (2.3kb) JavaScript library for creating web interfaces. This is the core of the future Nue ecosystem. It is similar to Vue.js, React.js or Svelte, but without hooks, effects, props, portals, watchers, providers, injects, suspension and other unusual abstractions in your way!

swup 4 - a universal library for creating transitions between pages. It manages the full page load life cycle and seamlessly adds animation between the current and next pages.

What's new in DevTools (Chrome 118)

WebKit features in Safari 17.0

---------

Image by vectorpocket on Freepik

[bablipal]

Web design and development are two closely related but distinct disciplines that are essential for creating and maintaining websites and web applications.

Web design and development are two closely related but distinct disciplines that are essential for creating and maintaining websites and web applications. Let's break down each of these areas:

Web Design: Web design focuses on the visual and user experience aspects of a website or web application. It involves creating the look, feel, and layout of a site, with the goal of making it visually appealing and user-friendly. Key aspects of web design include:

User Interface (UI) Design: Designing the elements that users interact with, such as buttons, menus, forms, and navigation bars.

User Experience (UX) Design: Ensuring that the website is intuitive and easy to navigate, taking into account user behavior and preferences.

Visual Design: Creating the overall aesthetic, including color schemes, typography, images, and graphics.

Wireframing and Prototyping: Creating low-fidelity sketches or interactive prototypes to plan and test the user interface.

Usability Testing: Gathering feedback from users to improve the design's effectiveness.

Web Development: Web development is the technical process of building the functional aspects of a website or web application. It involves turning the design concept into a fully functioning website or web app. Web development can be further divided into two main categories:

Front-end Development: Front-end developers work on the client side of a website, focusing on what users see and interact with directly in their web browsers. Key technologies and languages include HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. Front-end developers ensure that web designs are translated into responsive and interactive web pages.

Back-end Development: Back-end developers handle the server-side of a website or web application. They work on the server, databases, and application logic that make a site or app function. Common back-end technologies include server-side programming languages (such as Python, Ruby, PHP, and Node.js) and databases (like MySQL, PostgreSQL, and MongoDB). Security and performance are crucial considerations for back-end developers.

Full-Stack Development: Some developers specialize in both front-end and back-end development, and they are referred to as full-stack developers. Full-stack developers have a broad skill set and can handle the entire web development process, from designing the user interface to building server-side functionality.

In summary, web design and development are essential components of creating and maintaining websites and web applications. Web designers focus on the visual and user experience aspects, while web developers handle the technical implementation. Both disciplines are crucial for creating effective and functional web solutions.